<template>
    <div class="amplest">
        <ul class="userList">
            <li class="list_top">
                <span>姓名</span>
                <span>年龄</span>
                <span>性别</span>
                <span>电话</span>
                <span>编辑</span>
            </li>
        </ul>
        <div class="scroll" ref="ref">
            <ul class="section">
                <li v-for="(val) in arr" :key="val.phone">
                    <span>{{val.name}}</span>
                    <span>{{val.age}}</span>
                    <span>{{val.gender | toGender}}</span>
                    <span>{{val.phone}}</span>
                    <span class="del" @click = "delOneFromArr(val)">删除</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
// import getUser from ''
export default {
  data () {
    return {
      currentKey: -1,
      arr_: []
    }
  },
  // 方法
  methods: {
    delOneFromArr (index) {
      // del是在父组件on监听的方法
      // 第二个参数this.arr[index]是需要传的值
      this.arr_.splice(index, 1)

      // this.$bus.$emit('del', {isStatus: true, value: value})
    },
    getUser () {
      this.$http.get('/usr')
        .then((res) => {
          this.arr_ = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  // 计算
  computed: {
    arr () {
      const mobileReg = /^1(3[4-9]|47|5[012789]|8[2378])\d{8}$/
      const selectedHandle = {
        '-1': () => this.arr_,
        0: () => this.arr_.filter(v => v.gender),
        1: () => this.arr_.filter(v => !v.gender),
        2: () => this.arr_.filter(v => mobileReg.test(v.phone)),
        3: () => [...this.arr_].sort((prev, next) => prev.age - next.age)
      }
      return selectedHandle[this.currentKey]()
    }
  },
  // 过滤
  filters: {
    toGender (val) {
      return val ? '男' : '女'
    }
  },
  mounted () {
    // 给滚动条加挂载点
    let el = this.$refs.ref
    // 新建滚动条函数
    let sailor = new BScroll(el, {
      click: true,
      pullDownRefresh: {
        threshold: 50,
        stop: 30
      }
    })
    // 添加下拉刷新函数
    sailor.on('pullingDown', function () {
      let self = this
      console.log('下拉刷新...')
      let time = setInterval(function () {
        console.log('刷新完成...')
        self.refresh()
        self.finishPullDown()
        clearInterval(time)
      }, 1000)
    })
  },
  created () { // 在组件构建之初 就会自动执行这个函数
    this.$bus.$on('changeCurrentKey', (key) => {
      // key就是子组件传过来的值
      this.currentKey = key
    })
    this.getUser()
  }
}
</script>
<style scoped>
.amplest{
  background: aliceblue;
  background: linear-gradient(chartreuse, rosybrown);
}
.userList{
  list-style: none;
  margin: 0;
  padding: 0;
}
  .list_top{
    display: flex;
    justify-content: center;
  }
.list_top span{
  width: 20%;
  line-height: 50px;
  text-align: center;
}
.scroll{
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 50px;
  background: #555555;
  overflow: auto;
}
.scroll .section{
  background: #fff;
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
}
.scroll .section li{
  list-style: none;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  font-size: 0;
}
.scroll .section li span{
  display: inline-block;
  width: 20%;
  font-size: 15px;
  text-align: center;
  line-height: 60px;
  color: #555;
}
  .scroll .section li .del{
    color: red;
  }
</style>
